﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Spring DeferredResult 实现长轮询</title>
    <link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="/css/functionStudy.css">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>

    <script type="text/javascript">
        $(function () {
            /**
             * POST 请求 后台接口发送消息
             */
            $("#httPostServer").on("click", function () {
                var message = $("#messageArea").val();
                console.log("发送消息 message=" + message);
                $.ajax({
                    // headers 中必须指定内容类型为 json 类型，否则会报415错误
                    headers: {
                        'Content-Type': 'application/json;charset=utf8'
                    },
                    type: "post",
                    url: "/deferredResult/sendMessageToAll",
                    // 发送用户输入的信息
                    data: $("#messageArea").val(),
                    success: function (data) {
                        console.log(data);
                    },
                    error: function (data) {
                        console.log("ERROR:" + JSON.stringify(data));
                    }
                });
            });

            /**
             * 客户端长轮询监听消息
             * 1、长轮询请求返回之后再次发起请求 hold 连接，持续监听消息。
             * 2、前端也定义了一个超时时间 timeout，与后台设置相同即可。
             * 3、不管请求成功还是失败、还是超时，jquery 的 ajax 都会执行 complete 方法。此时再次发起请求监听。
             */
            function listeningMessage() {
                $.ajax({
                    url: "/deferredResult/listeningMessage",
                    data: {},
                    type: "get",
                    dataType:"json",
                    success: function (rs) {
                        $("#listeningMessage").prepend("<p>" + rs.time + "：" + rs.msg + "</p>");
                    },
                    error: function (rs) {
                        console.error(JSON.stringify(rs));
                    },
                    complete: function (rs) {
                        console.log("不管请求成功还是失败、还是超时，jquery 的 ajax 都会执行 complete 方法，重新监听信息。");
                        listeningMessage();
                    }
                });
            }

            //页面一访问就长轮询监听消息
            listeningMessage();
        });
    </script>
</head>
<body style="width: 80%;margin: auto">
<h3 style="margin-left: 35%" class="h3">Spring DeferredResult 实现长轮询</h3>
<div>

    <button type="button" class="btn btn-primary" id="httPostServer">发送消息</button>
    <textarea style="width: 100%;resize: none;margin-bottom: 10px;margin-top: 5px" id="messageArea"></textarea>

    <h5>接收消息</h5>
    <div style="width: 100%;height:auto;border:1px sandybrown solid; margin-bottom: 10px;margin-top: 5px"
         id="listeningMessage">
    </div>

</div>

</body>
</html>